<template>
  <div>
    <!-- <div
      v-if="article.image"
      id="banner"
      class="
        uk-height-small
        uk-flex
        uk-flex-center
        uk-flex-middle
        uk-background-cover
        uk-light
        uk-padding
      "
      :data-src="getStrapiMedia(article.image.url)"
      uk-img
    >
      <h1>{{ article.title }}</h1>
    </div> -->

    <div class="uk-section">
      <div class="uk-container uk-container-small">
        <!-- eslint-disable vue/no-v-html -->
        <div
          v-if="article.content"
          id="editor"
          v-html="$md.render(article.content)"
        />

        <!-- eslint-enable vue/no-v-html -->
        <p v-if="article.published_at">
          {{ moment(article.published_at).format("MMM Do YY") }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getStrapiMedia } from "../../utils/medias";
import { getMetaTags } from "../../utils/seo";

export default {
  async asyncData({ $strapi, params }) {
    const matchingArticles = await $strapi.find("articles", {
      slug: params.slug,
    });
    // matchingArticles[0].content.replace(
    //   /uploads(\S*)jpg/g,
    //   function (all, letter) {
    //     console.log(`匹配到了${all}`);
    //     return "好的";
    //   }
    // );
    //设置md文档中图片地址准确位置
    let art = matchingArticles[0];
    art.content = art.content.replace(/\(\/(\S*)\)/g, function (all, letter) {
      // console.log(`匹配到了${letter}`);
      return "(" + process.env.jikeid + "/" + letter + ")";
    });

    return {
      article: art,
      global: await $strapi.find("global"),
    };
  },
  data() {
    return {
      apiUrl: process.env.strapiBaseUri,
    };
  },
  methods: {
    checkcontent(content) {
      content.replace(/uploads(\S*)jpg/g, function (all, letter) {
        return "好的";
      });
    },
    moment,
    getStrapiMedia,
  },
  head() {
    const { defaultSeo, favicon, siteName } = this.global;

    // Merge default and article-specific SEO data
    const fullSeo = {
      ...defaultSeo,
      metaTitle: this.article.title,
      metaDescription: "好",
      shareImage: this.article.image,
    };

    return {
      titleTemplate: `%s | ${siteName}`,
      title: fullSeo.metaTitle,
      meta: getMetaTags(fullSeo),
      link: [
        {
          rel: "favicon",
          href: getStrapiMedia(favicon.url),
        },
      ],
    };
  },
};
</script>
